<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 600px;
            margin: 10px auto;
        }
        
        .slider-bar {
            position: absolute;
            margin-left: 310px;
            left: 50%;
            top: 300px;
            background-color: pink;
            width: 45px;
            height: 130px;
        }
        
        span {
            position: absolute;
            bottom: 0;
            display: none;
            text-align: center;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 2000px;
            background-color: yellowgreen;
        }
        
        .img {
            background: url(scroll补充说明.png) no-repeat;
            background-size: 100% auto;
            height: 400px;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            var bannerTop = banner.offsetTop; // 一定要在滚动事件的外面获取
            var sliderbarTop = sliderbar.offsetTop - bannerTop; // 固定定位后的top值
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 页面滚动事件 
            document.addEventListener('scroll', function() {
                console.log(window.pageYOffset);
                // 当页面券去的头部大于等于banner offsetTop 侧边栏改为固定定位
                if (window.pageYOffset >= bannerTop) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
                // 当滚动到main模块 显示回到顶部 否则隐藏
                if (window.pageYOffset >= mainTop) {
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                }
            });

            goBack.addEventListener('click', function() {
                // 返回顶部 指定位置
                // window.scroll(0, 100);
                animate(window, 0);
            });

            // 页面滚动到指定位置
            function animate(obj, target, callback) {
                // obj.timer 给不同的元素指定了自己的定时器（利用给对象添加属性的方式）
                clearInterval(obj.timer); // 保证元素只有一个定时器执行（先清除以前的定时器，保证只有一个定时器）
                obj.timer = setInterval(() => {
                    // 步长值写到定时器里面
                    // var step = Math.ceil((target - obj.offsetLeft) / 10);
                    var step = (target - window.pageYOffset) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (window.pageYOffset == target) {
                        clearInterval(obj.timer);
                        // 调用回调函数
                        if (callback) {
                            callback();
                        }
                    }
                    window.scroll(0, window.pageYOffset + step);
                }, 15);
            }
        })
    </script>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <div class="img w"></div>
</body>

</html>